<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>
</head>
<body>

    <style>
        .box{
            display: flex;
        }
        .box > div{
            padding:5px 15px;
            border: 1px solid #000;
        }
    </style>
  
    <div id="app">
        <!-- vue 提供了一种机制 允许我们动态的渲染某个组件 -->
        <div class="box"> 
            <div  @click="curCp='cp1'">选项卡1 </div>
            <div  @click="curCp='cp2'">选项卡2 </div>
            <div  @click="curCp='cp3'">选项卡3 </div>
        </div>

        <!-- keep 保持 alive 存活 include 包含包括  exclude 除了什么意外 -->
    
        <!-- 第1种写法 include="cp1,cp2"  -->
        <!-- 第2种写法 :include="['cp1','cp2']" -->
        <!-- 第3中写法(排除法) exclude="cp1"  -->

        <!-- <keep-alive :max="2"> 设置最大的缓存数值 如果超过了最大值 就会销毁最早缓存的组件 -->
        <keep-alive  :max="2">
            <component :is="curCp"></component>
        </keep-alive>

        <div> 当中在缓存中的组件 ： {{ alives }} </div>
        <button @click="alives.push('cp1')"> 让cp1 缓存 </button>
        <button @click="alives = alives.filter(item=>item!='cp1')"> 让cp1 不缓存 </button>
        
        <keep-alive :max="1">
            <component :is="kispo"></component>
        </keep-alive>
        <div class="box"> 
            <div  @click="kispo='cp1'">选项卡1 </div>
            <div  @click="kispo='cp2'">选项卡2 </div>
        </div>
       
    </div>

        
    
    <script>
        

        Vue.component('cp1',{
            name:'cp1',
            template:`
                <div>
                    我是cp1组件
                </div>
            `,
            created(){
                console.log('cp1创建')
            },
            beforeDestroy(){
                console.log('cp1销毁')
            },
            // 如果一个组件被缓存了就会 获得两个特定的生命周期
            // 失活  缓存的组件如果要做一些清除的操作 就是考虑在这个位置进行处理
            deactivated(){
                console.log('cp1 失活');
            },
            // 激活  缓存的组件只会执行一次 created 所以有些操作需要切换回来的时候执行
            //那么考虑在 activated里面去处理 在第一次实例化的过程也会执行一次 activated
            activated(){
                console.log('cp1 激活');
            }
        })


        Vue.component('cp2',{
            name:'cp2',
            template:`
                <div>
                    我是cp2组件
                </div>
            `,
            beforeDestroy(){
                console.log('cp2组件销毁')
            },
            activated(){
                console.log('cp2 激活');
            },
            deactivated(){
                console.log('cp2 失活');
            },
        })

        Vue.component('cp3',{
            name:'cp3',
            template:`
                <div>
                    我是cp3组件
                </div>
            `,
            beforeDestroy(){
                console.log('cp3组件销毁')
            },
            activated(){
                console.log('cp3 激活');
            },
            deactivated(){
                console.log('cp3 失活');
            },
        })
    
        const app = new Vue({
            el: '#app',
            data:{
                curCp:'cp1',
                alives: [],
                muArr:[],
                kispo:'cp1'
            }
        })

    </script>

</body>
</html>